import React, { Component, FC } from 'react'
import {Editor} from "react-draft-wysiwyg"   // Editor
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html"  // draft ===> html;
import htmlToDraft from "html-to-draftjs" //  html ===>  draft
import {EditorState,ContentState} from "draft-js"
import "./index.scss"
import { useState ,useEffect } from 'react';


const RichEditorFunc:FC<any> = ({
    content,
    getContent
})=>{
    const [editorState,setEditorState] = useState<any>()
    const [contentState,setContentState] = useState<any>()
    const onEditorStateChange=(editorState:any)=>{  // 修改编辑框的 state 
        setEditorState(editorState)
    }
    const onContentStateChange=(contentState:any)=>{ // 修改编辑框的 内容   
        setContentState(contentState)
    }
    useEffect(()=>{
        if(!content){
            return ;
        }
        
        // 修改  修改数据
        const html = content; 
        const contentBlock = htmlToDraft(html);
        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks); // 创建内容从 htmlToDraft
            const editorState = EditorState.createWithContent(contentState);// 创建编辑器状态 
            console.log(editorState)
            // this.setState({
            //     editorState
            // })
            setEditorState(editorState)
        }

    },[])
    return (
        <div>
            <Editor
                editorState={editorState}
                toolbarClassName="toolbarClassName" // DIY样式
                wrapperClassName="wrapperClassName" // DIY样式
                editorClassName="editorClassName" // DIY样式
                onEditorStateChange={onEditorStateChange}  
                onContentStateChange={onContentStateChange}
                onBlur={
                    ()=>{
                        console.log(contentState)
                        getContent(draftToHtml(contentState))  // 子改父 
                    }
                }
            />
        </div>
    )
}

export default RichEditorFunc

// export default RichEditor
// export default class RichEditor extends Component {
//     state = {
//         editorState:"",  // 状态
//         contentState:""  // 内容 
//     }
//     onEditorStateChange=(editorState:any)=>{  // 修改编辑框的 state 
//         this.setState({
//             editorState
//         })
//     }
//     onContentStateChange=(contentState:any)=>{ // 修改编辑框的 内容   
//         this.setState({
//             contentState
//         })
//     }

//     componentDidMount(){
//         if(!this.props.content){ // 父改子 
//             return ;
//         }
        
//         // 修改  修改数据
//         const html = this.props.content; 
//         const contentBlock = htmlToDraft(html);
//         if (contentBlock) {
//             const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks); // 创建内容从 htmlToDraft
//             const editorState = EditorState.createWithContent(contentState);// 创建编辑器状态 
//             console.log(editorState)
//             this.setState({
//                 editorState
//             })
//         }
//     }
//     render() {
//         return (
//             <div>
//                 <Editor
//                     editorState={this.state.editorState}
//                     toolbarClassName="toolbarClassName" // DIY样式
//                     wrapperClassName="wrapperClassName" // DIY样式
//                     editorClassName="editorClassName" // DIY样式
//                     onEditorStateChange={this.onEditorStateChange}  
//                     onContentStateChange={this.onContentStateChange}
//                     onBlur={
//                         ()=>{
//                             console.log(this.state.contentState)
//                             this.props.getContent(draftToHtml(this.state.contentState))  // 子改父 
//                         }
//                     }
//                 />
//             </div>
//         )
//     }
// }